<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" v-if="showtab" />
    <el-table-column label="日期" width="120">
      <template #default="scope">{{ scope.row.payTime }}</template>
    </el-table-column>
    <el-table-column property="orderCode" label="订单号" width="120" />
    <el-table-column property="orderAmount" label="金额" show-overflow-tooltip />
    <el-table-column label="操作" width="120">
      <template #default="scope">
        <slot :row="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref, defineProps, PropType, defineEmits, defineExpose, watch } from "vue";
import { ElTable } from "element-plus";
import { orderListProps } from "@/common/utils/userType";

const props = defineProps({
  tableData: {
    type: Array as PropType<orderListProps>,
    required: true,
  },
  showtab: {
    type: Boolean,
    default: false,
  },
});

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<orderListProps[]>([]);
const handleSelectionChange = (val: orderListProps[]) => {
  multipleSelection.value = val;
  emit("updateOpenData", val);
};
const toggleSelection = (rows?: orderListProps) => {
  if (rows) {
    multipleTableRef.value!.toggleRowSelection(rows, undefined);
  } else {
    multipleTableRef.value!.clearSelection();
  }
};

const emit = defineEmits(["updateOpenData"]);
defineExpose({
  handleSelectionChange,
  toggleSelection,
});
</script>
